今天,這個單元主要是銜接Day4,練習並熟悉關於陣列的一些方法,
如比對資料、搜尋資料、刪除增加資料等等。
而題目分為5題
此處為題目會用到的資料
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 }
];
const comments = [
{ text: 'Love this!', id: 523423 },
{ text: 'Super good1', id: 823423 },
{ text: 'Super good2', id: 823423 },
{ text: 'You are the best', id: 2039842 },
{ text: 'Ramen is my fav food ever', id: 123523 },
{ text: 'Nice Nice Nice!', id: 542328 }
];
用來檢查陣列中有任何一筆符合條件的資料
,有的話返回true
,否則false
通常用於比較兩個陣列
const ans1 = people.some(p => {
return new Date().getFullYear() - p.year >= 19
});
console.log(ans1); //true
用來檢查陣列中是否全部資料都符合條件
,有的話返回true
,否則false
const ans2 = people.every(p => {
return new Date().getFullYear() - p.year >= 19
});
console.log(ans2); // false
用來找尋陣列中第一筆符合條件的資料,並返回其資料
,類似filter,但filter會保留所有符合條件的。
如果要每筆都查盡量用filter,而只要找一筆資料就用find
const ans3 = comments.find(comment => {
return comment.id === 823423;
});
// 我刻意在資料中加一筆id相同的資料,但回傳第一筆符合的就停止了
console.log(ans3); // text: {"Super good1", id: 823423}
而find大多會運用在更新一筆特定資料
,如(購物車)如下:
let cart = [
{id: 1,count: 1},
{id: 2,count: 1},
{id: 3,count: 1},
{id: 4,count: 1}
];
const item = cart.find(item => {
console.log(item.id); // 到3就停止了,因為已找到目標
return item.id === 3;
});
// 將item的count更新為8
item.count = 8;
console.log(cart);
// 0: {id: 1, count: 1}
// 1: {id: 2, count: 1}
// 2: {id: 3, count: 8}
// 3: {id: 4, count: 1}
用來找尋陣列中第一筆符合條件的資料
,並返回其下標
(找編號)
const ans4 = comments.findIndex(comment => {
return comment.id === 823423;
});
console.log(ans4); // 1
start:起始位置 num:操作個數
slice, splice差別在於splice會影響原資料,slice不會
splice():可以發現原資料也跟著改變。
ans4為我們上一題獲得的值(1)
// const ans5 = comments.splice(ans4, 1);
// console.log(ans5, comments);
// 0: {text: "Super good1", id: 823423} ,[{…}, {…}, {…}, {…}, {…}]
let a = [1, 2, 3, 4]
console.log([...a] === a); //false
而如果我們要不影響資料使用splice,可以利用解構達到deep copy
在做刪除
// const ans5 = [...comments].splice(ans4, 1);
// console.log(ans5, comments);
// 0: {text: "Super good1", id: 823423} ,[{…}, {…}, {…}, {…}, {…}, {…}]
slice():可以發現原資料不會改變。
var ans6 = comments.slice(0, ans4);
// 從下標為2的資料之後全部刪除
var ans7 = comments.slice(ans4 + 1);
console.log(ans6, ans7, comments);
// 0: {text: "Love this!", id: 523423},
// [{…}, {…}, {…}, {…}]
// [{…}, {…}, {…}, {…}, {…}, {…}]
為了不影響原資料,我們也可以利用解構,做deep copy
// var [...arr2] = arr
// arr[2] = 5
// console.log(arr) // [1, 2, 5, 4, 5]
// console.log(arr2) // [1, 2, 3, 4, 5]
或是利用Object.assign來達到 deep copy
let obj1 = {
count: 1
};
// 創建一個新的物件(新的位址)並將obj1的資料放進去
let obj3 = Object.assign({}, obj1);
obj3.count = 3;
console.log(obj1, obj3); //{count: 1} {count: 3}